<template>
  <div v-show="iDialogVisible">
    <el-dialog
      title="查询结果"
      :visible.sync="iDialogVisible"
      :modal="false"
      v-if="iDialogVisible"
      center
      :append-to-body="true"
      :before-close="handleClose"
      :close-on-click-modal="false"
      class="iDialog"
    >
      <div class="iContent">
        <el-table
          :data="tableData"
          :key="itemKey"
          size="mini"
          style="width: 100%"
          max-height="300px"
          :header-cell-style="{
            'text-align': 'center',
            'background-color': '#e9f4fe',
            color: '#606266',
          }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="columnName" label="参数名称">
          </el-table-column>
          <el-table-column prop="target" label="参数值"> </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Overlay from 'ol/Overlay';
export default {
  props: {
    value: {
      type: Boolean,
    },
    searchResults: {
      type: Array,
      default: function () {
        return [];
      },
    },
    newCenter:Array,
    position:Object
  },
  data() {
    return {
      iDialogVisible: false,
      itemKey: "",
      tableData: [
        {
          columnName: "",
          target: "",
        },
      ],
    };
  },
  watch: {
    value(val) {
      this.iDialogVisible = val;
    },
    searchResults: {
      handler(arr) {
        this.itemKey = Math.random();
        (this.tableData = [
          {
            columnName: "",
            target: "",
          },
        ]),
          this.handlerSearchResults(arr);
      },
    },
    newCenter:{
      handler(val){
      this.createPopup(val)
    },
    deep:true
  }},
  //   position:{
  //     handler(){
  //     // console.log('pp',{...val})
  //     this.createPopup()
  //     // setTimeout(()=>{
  //     //   // this.setdiaogPosition({...val})

  //     // },1000)
      
  //   },
  //   deep:true
  // }},
  methods: {
    handleClose() {
      this.$emit("input", false);
    },
    handlerSearchResults(arr) {
      const attributesArr = arr[0].attributes;
      for (let item in attributesArr) {
        console.log("it", item, attributesArr[item]);
        let data = {
          columnName: item,
          target: attributesArr[item],
        };
        this.tableData.push(data);
      }
    },
    // 获取dialog
    setdiaogPosition(p){
      const DialogEl = document.querySelector('.iDialog .el-dialog');
      DialogEl.style.left = "calc(" + p.X+ "px - 50%)";
      DialogEl.style.top = "calc(" + p.Y + "px - 50%)";
      DialogEl.style.transitionDuration = 1;
      console.log('ddd',DialogEl)
      
      
    },
    // 
    createPopup(p){
      let overlayTip = new Overlay({
        element: this.$el,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        // positioning: 'bottom-center'
      });
      console.log(overlayTip,'ooo',p)
      overlayTip.setPosition(p);
    }
  },
};
</script>
<style>
.iDialog .el-dialog {
  width: 30% !important;
}
.iDialog .el-dialog__header{
  padding:5px 20px 10px !important
}
.iDialog .el-dialog__body{
  padding:10px 20px 10px !important
}
.iDialog .el-dialog__footer{
  padding:0 20px 10px !important
}
.iDialog .el-dialog__footer::after {
  content: "";
  border-width: 6px;
  bottom: -5px;
  margin-left: -6px;
  border-color: transparent;
  border-top-color: rgba(255,255,255,0.95);
  border-bottom-width: 0;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  border-style: solid;
}
</style>